﻿@{
    ViewBag.Title = "找回密码";
}
<script type="text/javascript" src="@Url.Content("~/Content/Default/JS/jquery.validate.js")"> </script>
<script type="text/javascript" src="@Url.Content("~/Content/Default/JS/messages_zh.js")"> </script>
<script type="text/javascript">
    $().ready(function () {
        $('form').validate({
            rules: {
                Mobile: {
                    required: true
                },
                ValidateCode: {
                    required: true,
                    number: true,
                    minlength: 4,
                    maxlength: 4
                }
            },
            messages: {
                Mobile: {
                    required: "<i class='ui-tiptext-icon iconfont' id='iusername-error'  title='出错'>&#xf0155;</i><span  style='color:Red;'>请输入手机号码！</span>"
                },
                ValidateCode: {
                    required: "<i class='ui-tiptext-icon iconfont' id='iusername-error'  title='出错'>&#xf0155;</i><span  style='color:Red;'>请输入验证码！</span>",
                    number: "<i class='ui-tiptext-icon iconfont' id='iusername-error'  title='出错'>&#xf0155;</i><span  style='color:Red;'>请输入数字！</span>",
                    minlength: "<i class='ui-tiptext-icon iconfont' id='iusername-error'  title='出错'>&#xf0155;</i><span  style='color:Red;'>请输入四位验证码</span>",
                    maxlength: "<i class='ui-tiptext-icon iconfont' id='iusername-error'  title='出错'>&#xf0155;</i><span  style='color:Red;'>请输入四位验证码</span>"
                }
            },
            errorPlacement: function (error, element) {
                if (element.is("#Mobile")) {
                    error.appendTo('#mobile-error');
                }
                else if (element.is("#ValidateCode")) {
                    error.appendTo('#validate-error');
                }
            }
        });
    });
</script>
<div class="ui-body">
    <div class="ui-inner">
        <div class="ui-title">
            <h1><i class="iconfont">&#xe624;</i> 找回密码</h1>
            <div class="triangle"></div>
        </div>
        <div class="ui-box">
            <div class="ui-box-step">
                <ol class="ui-step ui-step-4">
                    <li class="ui-step-start ui-step-done">
                        <div class="ui-step-line">-</div>
                        <div class="ui-step-icon">
                            <i class="iconfont">&#xe610;</i>
                            <i class="ui-step-number">1</i>
                            <span class="ui-step-text">输入账户名</span>
                        </div>
                    </li>
                    <li class=" ui-step-active">
                        <div class="ui-step-line">-</div>
                        <div class="ui-step-icon">
                            <i class="iconfont">&#xe610;</i>
                            <i class="ui-step-number">2</i>
                            <span class="ui-step-text">验证账户名</span>
                        </div>
                    </li>
                    <li class="">
                        <div class="ui-step-line">-</div>
                        <div class="ui-step-icon">
                            <i class="iconfont">&#xe610;</i>
                            <i class="ui-step-number">3</i>
                            <span class="ui-step-text">重置密码</span>
                        </div>
                    </li>
                    <li class="ui-step-end">
                        <div class="ui-step-line">-</div>
                        <div class="ui-step-icon">
                            <i class="iconfont">&#xe610;</i>
                            <i class="ui-step-number">&#xf00b2;</i>
                            <span class="ui-step-text">完成</span>
                        </div>
                    </li>
                </ol>
            </div>
            <div class="ui-tab">
                <ul class="ui-tab-items">
                    <li class="ui-tab-item ui-tab-item-current">
                        <a href="@Url.Action("FindPasswordByPhone", "Account")">手机绑定</a>
                    </li>
                    <li class="ui-tab-item">
                        <a href="@Url.Action("FindPasswordByEmail", "Account")">邮箱绑定</a>
                    </li>
                </ul>
            </div>
             @using (Html.BeginForm("RestPasswordByPhone", "Account", FormMethod.Post, new { @class = "ui-form" }))
            {
                <fieldset>
                <legend>找回密码</legend>
                    <div class="ui-form-item">
                        <label class="ui-label" for="Mobile">手机号码：</label>
                        <input id="Mobile" name="Mobile" class="ui-input ui-input-large" value="" />
                        <p id="mobile-error" class="ui-form-explain ui-tiptext ui-tiptext-error"></p>
                    </div>
                    <div class="ui-form-item">
                        <label class="ui-label" for="ValidateCode">验证码：</label>
                        <input name="ValidateCode" id="ValidateCode" class="ui-input ui-input-large" style="width:80px;margin-right:5px;" />
                        <button type="button" id="sendValicode" style="color: #000;" class="ui-button ui-button-gray big">获取验证码</button>
                        <p id="validate-error"class="ui-form-explain ui-tiptext ui-tiptext-error"></p>
                    </div>
                    <div class="ui-form-item">
                        <button  type="submit"  class="ui-button ui-button-orange big" >下一步</button>
                    </div>
                </fieldset>   
           
            }
         </div>
   </div>
</div>

<script type="text/javascript">
    $('#sendValicode').click(function () {
        var phone = $('#Mobile').val();
        var preg = /^1[3-9][0-9]\d{8}$/;
        if (!preg.test(phone)) {
            alert("请输入正确的手机号码！");
            return;
        }
        $.ajax({
            type: "post", //使用get方法访问后台
            dataType: "json", //返回json格式的数据
            url: "/Valicode/FindPasswordByPhone", //要访问的后台地址
            data: "phone=" + phone,
            success: sendResult
        });
    });

    var wait = 90;

    function sendResult(result) {
        if (result.Status) {
            sendSuccess();
        } else {
            alert(result.Info);
        }
    }

    function sendSuccess() {
        if (wait == 0) {
            $('#sendValicode').removeAttr("disabled").attr('style', 'color:#000;width:auto;');
            $('#sendValicode').text('获取验证码');
            wait = 90;
            return;
        } else {
            $('#sendValicode').attr('disabled', 'disabled').attr('style', 'color:#999;width:auto;');
            $('#sendValicode').text('再次获取(' + wait + ')');
            wait = wait - 1;
            setTimeout(function () {
                sendSuccess();
            },
                1000);
        }
    }

 
</script>